<template>
  <view class="page-wrapper exhibition-info page">
    <div class="wrap">
      <div class="top-img">
        <img class="img" :src="ossDomain + info.coverImg" mode="aspectFill" alt="" />
      </div>
      <div class="info-box">
        <div class="title">
          {{ info.name }} <br />
          {{ info.enName }}
        </div>
        <div class="text" style="margin-bottom: 44rpx">
          <div class="te" style="margin-top: 44rpx">¥ {{ getPriceList(info.priceList) }}</div>
          <div class="te">{{ info.name }}</div>
          <div class="te">{{ info.enName }}</div>
          <div class="te">{{ formatTimeRange(info.startTime, info.endTime) }}</div>
        </div>
        <div class="tips">
          *电子凭证 <br />
          *不支持退换
        </div>
        <div class="rich-text" style="font-size: 24rpx; line-height: 44rpx">
          <uv-parse :content="info.particulars" :selectable="true"></uv-parse>
        </div>
      </div>
    </div>
    <div class="bottom-box">
      <div class="bottom-button-box">
        <div class="button" @click="toBooking">订票 Book Tickets</div>
        <div :style="{ height: bottomSafeArea + 'px' }"></div>
      </div>
      <div :style="{ height: `calc(${bottomSafeArea}px + 100rpx)` }"></div>
    </div>
  </view>
</template>

<script setup lang="ts">
import { ossDomain } from '@/utils/oss'
import { ref, reactive, getCurrentInstance, onMounted, watch, computed } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { exhibitionInfo } from '@/utils/api/exhibition'
import { useStore } from 'vuex'
import { formatTimeRange } from '@/utils/current'
const store = useStore()
const bottomSafeArea = computed(() => store.getters['system/bottomSafeArea'])

let info = ref<any>({})
let id: string | number = ''
const getInfo = async () => {
  const { code, data } = await exhibitionInfo({ id })
  if (code === 200) {
    info.value = data
  }
}

const getPriceList = (data: any) => {
  // 不要删除两边的空格
  return data.map((item) => item.price).join(' / ')
}

const toBooking = () => {
  uni.navigateTo({ url: '/pages/ticketBooking/ticketBooking?id=' + id })
}

onLoad((opt) => {
  console.log('opt', opt)
  if (opt.id) {
    id = opt.id
    getInfo()
  }
})
</script>

<style lang="scss" scoped>
.exhibition-info {
  .top-img {
    margin-bottom: 20rpx;
    height: 400rpx;
    .img {
      height: 100%;
    }
  }
  .img {
  }
  .tips {
    font-size: 24rpx;
    color: #000;
    line-height: 36rpx;
    margin-bottom: 44rpx;
  }
}
.bottom-box {
  .bottom-button-box {
    background: #000;
    position: fixed;
    width: 100%;
    left: 0;
    bottom: 0;
    z-index: 100;
  }
  .button {
    height: 100rpx;
    padding-top: 20rpx;
    text-align: center;
    color: #fff;
  }
}
</style>
